<template>
  <div>
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @closed="$emit('update:activated', false)"
               width="750px">
      <el-card>
        <div class="dialogStyle" style="display: flex;flex-direction: column">
          <el-form  class="search-form search-form-normal" label-width="110px" ref="form"
                    style="flex: 5" :model="form" size="mini" :rules="rules">
            <el-form-item :label="$t('pageTable.MatterMaterialSpecificNumber')" prop="materialCode">
              <el-input v-model="form.materialCode" class="search-form-item-input" style="width:160px" size="mini"
                         :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
              <div style="float: right;margin-right: 40px;"><el-button :disabled="form.materialCode==''" @click="selectMaterialInfo(form.materialCode)">{{$t('searchFrom.checkAndGet')}}</el-button></div>
            </el-form-item>
            <el-form-item :label="$t('pageTable.materialName')" prop="materialName">
              <el-input v-model="form.materialName" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.contractNo')" prop="contractNo">
              <el-input v-model="form.contractNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
              <div style="float: right;margin-right: 40px;"><el-button :disabled="form.contractNo==''" @click="initInfoByContractNo(form.contractNo)">{{$t('searchFrom.checkAndGet')}}</el-button></div>
            </el-form-item>
            <el-form-item :label="$t('pageTable.packingDate')" prop="packingDate">
              <el-date-picker
                v-model="form.packingDate"
                type="date"
                style="width:160px"
                value-format="yyyyMMddHHmmss">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.departureDate')" prop="departureDate">
              <el-date-picker
                v-model="form.departureDate"
                type="date"
                style="width:160px"
                @blur="blurDepartureDate"
                value-format="yyyyMMddHHmmss">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.TypeOfShipping')" prop="shippingMethods">
              <el-select  v-model="form.shippingMethods" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in transportation"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.billNo')" prop="billNo">
              <el-input v-model="form.billNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.containerSize')" prop="containerSize">
              <!--<el-input v-model="form.containerSize" class="search-form-item-input" style="width:160px" size="mini"-->
                        <!--:maxlength="32" clearable></el-input>-->

              <el-radio-group v-model="form.containerSize" class="" style="width:250px" size="mini">
                <el-radio label="20GP">20GP</el-radio>
                <el-radio label="40GP">40GP</el-radio>
                <el-radio label="40HC">40HC</el-radio>
              </el-radio-group>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.containerNo')" prop="containerNo">
              <el-input v-model="form.containerNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.MatterSupplierName')" prop="supplierName">
              <el-input v-model="form.supplierName" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.MatterCompany')" prop="unit">
              <el-select  v-model="form.unit" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in unit"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.sendAmount')" prop="sendAmount">
              <el-input v-model="form.sendAmount" class="search-form-item-input" style="width:160px" size="mini" @blur="blurSendAmount"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.price')" prop="price">
              <el-input v-model="form.price" class="search-form-item-input" style="width:160px" size="mini" @blur="blurPrice"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.amount')" prop="amount">
              <el-input v-model="form.amount" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.payment')" prop="payment">
              <el-select  v-model="form.payment" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in payment"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.paymentDay')" prop="paymentDay">
              <el-date-picker
                v-model="form.paymentDay"
                type="date"
                style="width:160px"
                value-format="yyyyMMddHHmmss">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.paymentDate')" prop="paymentDate">
              <el-date-picker
                v-model="form.paymentDate"
                type="date"
                style="width:160px"
                value-format="yyyyMMddHHmmss">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.dictionaryRemark')" prop="remark">
              <el-input v-model="form.remark" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
            <el-form-item :label="$t('pageTable.freightPremium')" prop="freightPremium">
              <el-input v-model="form.freightPremium" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialogButton">
        <el-button type="primary" size="mini" :disabled="form.isLocked==1" @click="submit('form')"><i
          class="fa fa-check"></i>  {{$t('searchFrom.confirm')}}
        </el-button>
        <el-button size="mini" @click=" cancel">{{$t('searchFrom.cancel')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import activityService from '@/api/warehouse/GoodsList'

  export default {
    name: "EditOrderPlan",
    props: {
      id: {},
      mode: "",
    },
    computed: {
      title: function () {
        let entityName = this.$t('route.warehouseDelivery')
        if(this.mode === 'ADD'){return this.$t('searchFrom.add')+entityName}
        else if(this.mode === 'EDIT'){return this.$t('searchFrom.edit')+entityName}
      }
    },
    data() {
      return {
        dialogFormVisible: true,
        goodsStatus:[],
        unit:[],
        transportation:[],
        payment:[],
        search_keys: {},

        form: {
          contractNo:"",
          packingDate:"",
          departureDate:"",
          shippingMethods:"",
          billNo:"",
          containerSize:"",
          containerNo:"",
          supplierName:"",
          materialName:"",
          materialCode:"",
          unit:"",
          sendAmount:"",
          price:"",
          amount:"",
          payment:"",
          paymentDay:"",
          paymentDate:"",
          remark:"",
          freightPremium:"",
        },
        /**表单的验证*/
        rules: {
          materialCode: [
            {required: true, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          materialName: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          contractNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          packingDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          departureDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          shippingMethods:[
            {required: true, message: "请选择运输方式", trigger: 'change'}
          ],
          billNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          containerSize: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          containerNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          supplierName: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          unit:[
            {required: true, message: this.$t('Tips.checkMaterialUnit'), trigger: 'change'}
          ],
          sendAmount:[
            {pattern:  /^([0-9]*)+\.{0,1}[0-9]{1,3}$/ , trigger: 'blur', message: this.$t('Tips.floatCheck'),}
          ],
          price:[
            {pattern:  /^([0-9]*)+\.{0,1}[0-9]{1,6}$/ , trigger: 'blur', message: this.$t('Tips.floatPriceCheck'),}
          ],
          amount:[
            {pattern:  /^([0-9]*)+\.{0,1}[0-9]{1,6}$/ , trigger: 'blur', message: this.$t('Tips.floatPriceCheck'),}
          ],
          payment:[
            {required: true, message: this.$t('Tips.chooseTransportation'), trigger: 'change'}
          ],
          paymentDay:[
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          paymentDate:[
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          remark:[
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 200, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          freightPremium:[
            // {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],


        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      initInfoByContractNo(contractNo){
        activityService.initInfoByContractNo({contractNo}).then(resp=>{
          if (resp.data.code == 200){
            this.form.billNo =resp.data.result.billNo;
            this.form.packingDate=resp.data.result.packingDate;
            this.form.departureDate=resp.data.result.departureDate;
            this.form.paymentDay=resp.data.result.paymentDay;
            this.form.paymentDate=resp.data.result.paymentDate;
          } else {
            this.$notify({message: resp.data.message, type: "error"});
          }
        },error => {

        })
      },
      blurDepartureDate(){
        this.form.paymentDay= this.form.departureDate && this.$moment( this.form.departureDate,'YYYYMMDDHHmmss').add(30, 'days').format('YYYYMMDDHHmmss')|| "";

      },
      blurSendAmount(){
        this.form.amount=this.form.price*this.form.sendAmount;
      },
      blurPrice(){
        this.form.amount=this.form.price*this.form.sendAmount;
      },
      async init() {
         await  activityService.initView().then(resp=>{
           this.goodsStatus=resp.data.result.goodsStatus;
           this.transportation=resp.data.result.transportation;
           this.payment=resp.data.result.payment;
           this.unit=resp.data.result.unit;
        },error => {

        })
        if (this.mode == "EDIT") {
          await activityService.getDeliverInfo({id: this.id}).then(resp => {
            this.form = resp.data.result;
          }, err => {
            console.error(err);
          });
        }

      },
      async selectMaterialInfo(materialCode){
        await activityService.selectMaterialInfo({materialCode:materialCode}).then(resp=>{
          if (resp.data.code == "201") {
              this.form.unit=resp.data.result.materialUnit;
              this.form.supplierName=resp.data.result.supplierNameCn;
              this.form.materialName=resp.data.result.materialDescCn;
              this.form.price = resp.data.result.materialPrice;
          } else {
            this.form.unit="";
            this.form.supplierName="";
            this.form.materialName="";
            this.$notify({message: resp.data.message, type: "error"});
          }
        })
      },
      /*确定*/
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              id                        :this.id                              || undefined,
              contractNo                :this.form.contractNo                 ||undefined,
              packingDate:this.form.packingDate ||undefined,
              departureDate:this.form.departureDate || undefined,
              shippingMethods:this.form.shippingMethods || undefined,
              billNo:this.form.billNo || undefined,
              containerSize:this.form.containerSize || undefined,
              containerNo:this.form.containerNo || undefined,
              supplierName:this.form.supplierName || undefined,
              materialName:this.form.materialName || undefined,
              materialCode:this.form.materialCode ||undefined,
              unit:this.form.unit ||undefined,
              sendAmount:this.form.sendAmount || undefined,
              price:this.form.price || undefined,
              amount:this.form.amount || undefined,
              payment:this.form.payment || undefined,
              paymentDay:this.form.paymentDay || undefined,
              paymentDate:this.form.paymentDate || undefined,
              remark:this.form.remark ||undefined,
              freightPremium:this.form.freightPremium || undefined,
            };
            if (this.mode == 'EDIT') {  //编辑
                activityService.updateGoods({...data}).then(resp => {
                  if (resp.data.code == "201") {
                    this.$notify({message: resp.data.message, type: "success"});
                    this.$emit("success");
                    this.dialogFormVisible = false
                  } else {
                    this.$notify({message: resp.data.message, type: "error"});
                  }
                })
            } else {
                activityService.addGoods({...data}).then(resp => {  //添加
                  if (resp.data.code == "201") {
                    this.$notify({message: resp.data.message, type: "success"});
                    this.$emit("success");
                    this.dialogFormVisible = false
                  } else {
                    this.$notify({message: resp.data.message, type: "error"});
                  }
                })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.dialogFormVisible = false
      },
    }
  }
</script>

<style scoped>

</style>